<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30_操作元素对象</title>
    <link rel="stylesheet" href="./css/basic.css">
    <style>
        .container {
            width: 100vw;
            height: 100vh;
        }
        .header {
            width: 100%;
            background-color: aqua;
        }
        .header ul {
            display: flex;
            justify-content: space-evenly;
        }
        .header ul li {
            width: 100%;
            height: 100px;
            line-height: 100px;
            font-size: larger;
            text-align: center;
        }
        .header ul li:hover {
            width: 100%;
            color: white;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li index = "0">首页</li>
                <li index = "1">分类</li>
                <li index = "2">购物袋</li>
                <li index = "3">我的</li>
            </ul>
        </div class="body">
            <span>内容</span>
        </div>
    </div>
    <script>
        let allTabs = document.querySelectorAll(".header ul li")
        let bodyDom = document.querySelector(".body")
        allTabs.forEach(dom => {
            dom.addEventListener("click",(event) => {
                // 将其他的样式都恢复正常
                // 取消其他颜色
                allTabs.forEach(item => {
                    item.style.backgroundColor = "transparent"
                    item.style.color = "#000"
                
                })
                event.target.style.backgroundColor = "coral";
                event.target.style.color = "#fff";
                const flag = event.target.getAttribute("index")
                if (flag === "0") {
                    bodyDom.innerHTML = `<h1>首页</h1>`
                } else if (flag === "1") {
                    bodyDom.innerHTML = `<h1>分类</h1>`
                }else if (flag === "2") {
                    bodyDom.innerHTML = `<h1>购物袋</h1>`
                } else {
                    bodyDom.innerHTML = `<h1>我的</h1>`
                }
            })
        })
    </script>
</body>
</html>